.btn {
  display: inline-block;
  font-weight: $f-btn-font-weight;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: $f-btn-border-width solid transparent;
  @include f-button-size($f-btn-padding-y,
    $f-btn-padding-x,
    $farris-btn-font-size,
    $f-btn-line-height,
    $f-btn-border-radius);
  @include f-transition($f-btn-transition);

  &:hover,
  &:focus {
    text-decoration: none;
  }

  &:focus,
  &.focus {
    outline: 0;
    @include f-has-box-shadow($f-btn-focus-box-shadow);
  }

  &.disabled,
  &:disabled {
    opacity: $f-btn-disabled-opacity;
    @include f-has-box-shadow(none);
  }

  &:not(:disabled):not(.disabled) {
    cursor: pointer;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    @include f-has-box-shadow($f-btn-active-box-shadow);

    &:focus {
      @include f-has-box-shadow($f-btn-focus-box-shadow);
    }
  }
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}



.btn-primary {
  @include f-button-setting($farris-btn-primary-bg,
    $farris-btn-primary-border,
    $farris-btn-primary-hover-bg,
    $farris-btn-primary-hover-border,
    $farris-btn-primary-active-bg,
    $farris-btn-primary-active-border,
    $farris-btn-primary-color,
    $farris-btn-primary-hover-color,
    $farris-btn-primary-active-color,
    $farris-btn-primary-disabled-bg,
    $farris-btn-primary-disabled-border,
    $farris-btn-primary-disabled-color,
    $farris-btn-primary-box-shadow,
    $farris-btn-primary-focus-box-shadow,
    $farris-btn-primary-active-box-shadow );
}

.btn-secondary {
  @include f-button-setting($farris-btn-secondary-bg,
    $farris-btn-secondary-border,
    $farris-btn-secondary-hover-bg,
    $farris-btn-secondary-hover-border,
    $farris-btn-secondary-active-bg,
    $farris-btn-secondary-active-border,
    $farris-btn-secondary-color,
    $farris-btn-secondary-hover-color,
    $farris-btn-secondary-active-color,
    $farris-btn-secondary-disabled-bg,
    $farris-btn-secondary-disabled-border,
    $farris-btn-secondary-disabled-color,
    $farris-btn-box-shadow-outline,
    $farris-btn-focus-box-shadow-outline,
    $farris-btn-active-box-shadow-outline);
}

.btn-danger {
  @include f-button-setting($farris-btn-danger-bg,
    $farris-btn-danger-border,
    $farris-btn-danger-hover-bg,
    $farris-btn-danger-hover-border,
    $farris-btn-danger-active-bg,
    $farris-btn-danger-active-border,
    $farris-btn-danger-color,
    $farris-btn-danger-hover-color,
    $farris-btn-danger-active-color,
    $farris-btn-danger-disabled-bg,
    $farris-btn-danger-disabled-border,
    $farris-btn-danger-disabled-color,
    $farris-btn-box-shadow-outline,
    $farris-btn-focus-box-shadow-outline,
    $farris-btn-active-box-shadow-outline);
}

.btn-success {
  @include f-button-setting($farris-btn-success-bg,
    $farris-btn-success-border,
    $farris-btn-success-hover-bg,
    $farris-btn-success-hover-border,
    $farris-btn-success-active-bg,
    $farris-btn-success-active-border,
    $farris-btn-success-color,
    $farris-btn-success-hover-color,
    $farris-btn-success-active-color,
    $farris-btn-success-disabled-bg,
    $farris-btn-success-disabled-border,
    $farris-btn-success-disabled-color);
}

.btn-warning {
  @include f-button-setting($farris-btn-warning-bg,
    $farris-btn-warning-border,
    $farris-btn-warning-hover-bg,
    $farris-btn-warning-hover-border,
    $farris-btn-warning-active-bg,
    $farris-btn-warning-active-border,
    $farris-btn-warning-color,
    $farris-btn-warning-hover-color,
    $farris-btn-warning-active-color,
    $farris-btn-warning-disabled-bg,
    $farris-btn-warning-disabled-border,
    $farris-btn-warning-disabled-color);
}

.btn-dark {
  @include f-button-setting($farris-btn-dark-bg,
    $farris-btn-dark-border,
    $farris-btn-dark-hover-bg,
    $farris-btn-dark-hover-border,
    $farris-btn-dark-active-bg,
    $farris-btn-dark-active-border,
    $farris-btn-dark-color,
    $farris-btn-dark-hover-color,
    $farris-btn-dark-active-color,
    $farris-btn-dark-disabled-bg,
    $farris-btn-dark-disabled-border,
    $farris-btn-dark-disabled-color);
}

.btn-light {
  @include f-button-setting($farris-btn-light-bg,
    $farris-btn-light-border,
    $farris-btn-light-hover-bg,
    $farris-btn-light-hover-border,
    $farris-btn-light-active-bg,
    $farris-btn-light-active-border,
    $farris-btn-light-color,
    $farris-btn-light-hover-color,
    $farris-btn-light-active-color,
    $farris-btn-light-disabled-bg,
    $farris-btn-light-disabled-border,
    $farris-btn-light-disabled-color);
}

.btn-info {
  @include f-button-setting($farris-btn-info-bg,
    $farris-btn-info-border,
    $farris-btn-info-hover-bg,
    $farris-btn-info-hover-border,
    $farris-btn-info-active-bg,
    $farris-btn-info-active-border,
    $farris-btn-info-color,
    $farris-btn-info-hover-color,
    $farris-btn-info-active-color,
    $farris-btn-info-disabled-bg,
    $farris-btn-info-disabled-border,
    $farris-btn-info-disabled-color);
}

@each $f-color,
$f-value in $f-theme-colors {
  .btn-outline-#{$f-color} {
    @include f-button-outline-setting($f-value);
  }
}

//
// Link buttons
//

.btn-link {
  font-weight: $f-font-weight-normal;
  color: $farris-btn-link-color;
  background-color: transparent;
  // 修改link按钮样式
  padding: 0;
  border: 0;
  line-height: 1.25rem;

  &:hover {
    color: $farris-btn-link-hover-color;
    text-decoration: $f-link-hover-decoration;
    background-color: transparent;
    border-color: transparent;
  }

  &:focus,
  &.focus {
    text-decoration: $f-link-hover-decoration;
    border-color: transparent;
    box-shadow: none;
    color: $farris-btn-link-active-color;
    @include f-has-box-shadow(none);
  }

  &:active,
  &.active {
    box-shadow: none !important;
    color: $farris-btn-link-active-color;
  }

  &:disabled,
  &.disabled {
    color: $farris-btn-link-disabled-color;
    pointer-events: none;
  }

  +.btn-link {
    margin-right: 0.875rem;
  }

}

//
// Button Sizes
//

.btn-lg {
  @include f-button-size($f-btn-padding-y-lg,
    $f-btn-padding-x-lg,
    $f-font-size-lg,
    $f-btn-line-height-lg,
    $f-btn-border-radius-lg);
}

.btn-sm {
  @include f-button-size($f-btn-padding-y-sm,
    $f-btn-padding-x-sm,
    $f-font-size-sm,
    $f-btn-line-height-sm,
    $f-btn-border-radius-sm);
}

//
// Block button
//

.btn-block {
  display: block;
  width: 100%;

  +.btn-block {
    margin-top: $f-btn-block-spacing-y;
  }
}

input[type='submit'],
input[type='reset'],
input[type='button'] {
  &.btn-block {
    width: 100%;
  }
}

.btn-warning {
  color: $farris-btn-warning-text;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark,
.btn-outline-link {

  &.disabled,
  &:disabled {
    color: $farris-btn-outline-disabled-color;
    border-color: $farris-btn-outline-disabled-border;
    background: transparent;
  }
}